<template>
  <uni-popup ref="popup" type="center" :mask-click="false">
    <view class="container flex-col">
      <image class="bg" :src="type == 'phone' ? 'https://down.qwdata.vip/app_icon/bind_merge_dialog_bg_phone.png' : 'https://down.qwdata.vip/app_icon/bind_merge_dialog_bg_weixin.png'"></image>
      <view class="flex-col btns align-center">
        <image class="btn1" @click="agree"
               :src="type == 'phone' ? 'https://down.qwdata.vip/app_icon/bind_merge_dialog_merge_blue.png' : 'https://down.qwdata.vip/app_icon/bind_merge_dialog_merge_green.png'"></image>
        <image class="btn2" @click="close"
               :src="type == 'phone' ? 'https://down.qwdata.vip/app_icon/bind_merge_dialog_other_phone.png' : 'https://down.qwdata.vip/app_icon/bind_merge_dialog_other_weixin.png'"></image>
      </view>
    </view>
    <view class="flex-row close-container justify-center">
      <image class="close" @click="close" src="https://down.qwdata.vip/app_icon/bind_merge_dialog_close.png"></image>
    </view>
  </uni-popup>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  name: "CheckBindMergeDialog",
  data() {
    return {
      type: null
    };
  },
  computed: {
    ...mapGetters(['mine'])
  },
  methods: {
    open(type) {
      this.type = type
      this.$refs.popup.open()
      return new Promise((resolve, reject) => {
        this.agreeFn = resolve
        this.noAgreeFn = reject
      })
    },
    close() {
      this.$refs.popup.close()
      this.agreeFn = null
      if (this.noAgreeFn) {
        this.noAgreeFn()
        this.noAgreeFn = null
      }
    },
    agree() {
      this.noAgreeFn = null
      if (this.agreeFn) {
        this.agreeFn()
        this.agreeFn = null
      }
    },
  }
}
</script>

<style lang="scss">
.close-container {
  position: absolute;
  margin-top: 106upx;
  width: 606upx;

  .close {
    width: 58upx;
    height: 60upx;
  }
}

.container {
  width: 606upx;
  height: 644upx;
  position: relative;

  .bg {
    position: absolute;
    width: 606upx;
    height: 644upx;
  }

  .btns {
    position: absolute;
    width: 606upx;
    bottom: 67upx;

    .btn1 {
      width: 514upx;
      height: 106upx;
      margin-bottom: 32upx;
    }

    .btn2 {
      width: 514upx;
      height: 98upx;
    }
  }
}
</style>
